<%= render Settings::ExpandableComponent.new class: "mb-4", data: {capsule: "true"} do |expandable| %>
  <% expandable.description do %>
    <%= render Settings::ControlRowComponent.new do |row| %>
      <% row.icon do %>
        <%= render "icon", sharing_service: sharing_service %>
      <% end %>

      <% row.title { sharing_service.label } %>

      <% row.control do %>
        <% if status == :active %>
          <%= render partial: "supported_sharing_services/delete_supported_service", locals: {sharing_service: sharing_service} %>
        <% elsif status == :issue %>
          <%= svg_tag "icon-error-message", title: "Authentication Error", data: {toggle: "tooltip"} %>
          <%= render partial: "supported_sharing_services/delete_supported_service", locals: {sharing_service: sharing_service} %>
        <% else %>
          <%= button_tag 'Activate', class: 'button button-secondary', data: {action: "expandable#toggle"} %>
        <% end %>
      <% end %>
    <% end %>
  <% end %>

  <% expandable.item do %>
    <div class="py-3 px-4">
      <%= yield %>
    </div>
  <% end %>
<% end %>
